const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin  = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

/**
 * development
 * production
 */
var mode = 'development';

/**
 * 如果cli传递了mode，则优先使用
 */
function getMode(args) {
    for (let i = 0; i < args.length;i++) {
        let arr = args[i].replace(/\s+/,' ').split('=');
        if(arr[0] === '--mode') {
            return arr[1];
        }
    }
    return false;
}
const argmode = getMode(process.argv.splice(2));
if(argmode) {
    mode = argmode;
}
console.log('mode',mode);
const publicPath = (mode === 'production')?'http://kikyou27.gitee.io/mishop':'http://www.mishop.com';

const config = {
    mode,
    entry: {
        index:'./src/pages/index/index.js',
        mobile:'./src/pages/mobile/index.js',
        detail:'./src/pages/detail/index.js',
    },
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: '[name]/bundle.js',
        publicPath
    },
    resolve: {
        alias: {
            '@':path.resolve('src'),
        }
    },
    externals:{
        jquery:'jQuery'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [ MiniCssExtractPlugin.loader,'css-loader','postcss-loader']
            },
            {
                test:/\.styl$/,
                use:[ MiniCssExtractPlugin.loader,'css-loader','postcss-loader','stylus-loader']
            },
            {
                test:/\.(woff|svg|ttf|eot)$/,
                use: [{
                    loader:'file-loader',
                    options: {
                        outputPath:'iconfont'
                    }
                }]
            },
            {
                test:/\.(jpg|gif|png|gif)$/,
                loader: 'url-loader?limit=8192&name=images/[name].[ext]'
            }
        ]
    },
    plugins: [
        new CopyPlugin({
            patterns: [
              { from: './src/images/favicon.ico'},
              { from: './src/images',to:'./images'},
            ],
          }),
        //首页
        new HtmlWebpackPlugin({
            chunks:['index'],
            template:'./src/pages/index/index.html',
            filename: 'index.html'
        }),
        //手机页
        new HtmlWebpackPlugin({
            chunks:['mobile'],
            template:'./src/pages/mobile/index.html',
            filename: 'mobile/index.html'
        }),
        //详情页
        new HtmlWebpackPlugin({
            chunks:['detail'],
            template:'./src/pages/detail/index.html',
            filename: 'detail/index.html'
        }),
        new MiniCssExtractPlugin ({
            filename: 'styles/[name].css',
            chunkFilename:'styles/[name].css',
        }),
    ],
    
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: 'commons',    //提取出来的文件命名
                    chunks: 'initial',  //initial表示提取入口文件的公共部分
                    minChunks: 2,       //表示提取公共部分最少的文件数
                    minSize: 0          //表示提取公共部分最小的大小
              }
          }
        }
    },
    
    devServer: {
        hot: true,
        contentBase:path.resolve(__dirname,'public'),
        host: 'www.mishop.com',
        port:80
    }
    
}


//生产环境压缩css
if(mode === 'production') {
    config.plugins.push(new OptimizeCssAssetsPlugin({
        assetNameRegExp: /\.css$/g,
        cssProcessor: require('cssnano'),
        cssProcessorPluginOptions: {
          preset: ['default', { discardComments: { removeAll: true } }],
        },
        canPrint: true
    }));
} 

module.exports = config;